<template>
    <!-- <dbinput v-model:name="name" v-model:id="id" :isreadonly="formdatabase.isreadonly" 
  @dbclick="showform" @update:id="handleidUpdate" @update:name="handlenameUpdate"></dbinput> -->
    <div style="width: 100%">
        <div style="display: flex; width: 100%">
            <el-input :model-value="id" @dblclick="showform" :readonly="formdatabase.isreadonly" @input="handleChange('id', $event)" />
            <el-tooltip :content="formdatabase.name" placement="top">
                <el-input :model-value="name" disabled />
            </el-tooltip>
        </div>
    </div>
    <el-dialog v-model="dialogVisible" :title="$t('选择角色')" width="600" draggable>
        <div>
            <input class="el-input__inner" type="text" autocomplete="off" tabindex="0" id="el-id-80-278" />
            <el-input v-model="findform.keyvalue" style="padding: 5px" @keyup.enter="gettablist" :placeholder="$t('请输入ID或名称')">
                <template #append>
                    <el-button @click="gettablist" type="primary"
                        ><el-icon><Search /></el-icon
                    ></el-button>
                </template>
            </el-input>
            <!-- prettier-ignore -->
            <vxe-table
                :data="tablelist"
                :loading="loading" 
                border 
                height="350"
                :mouse-config="{selected: true}" 
                :row-config="{ isCurrent: true, isHover: true }" 
                :column-config="{resizable: true}"
                @cell-click="SetCurrent"
                @cell-dblclick="dbSetCurrent">
                <vxe-column v-for="(column, index) in uiSectionList[0].tableProps" 
                :field="column.prop" 
                :title="I(column.label, column.labeleng)" 
                :width="column.width"
                :fixed="column.fixed"
                :align="column.align">
                  <template #default="{ row,rowIndex  }">
                      <div v-if="column.type === 'checkbox'">
                            <el-checkbox v-model="row['checked']" />
                        </div>
                        <div v-else-if="column.prop === 'state'">
                            <el-tag v-if="row.state === 1"  effect="dark" round type="primary" >{{$t('启用')}}</el-tag>
                            <el-tag v-if="row.state !== 1"  effect="dark" round type="info" >{{$t('停用')}}</el-tag>
                        </div>
                        <div v-else-if="column.type === 'action'">
                            <el-button type="primary" link @click="comfirm(rowIndex, row)">
                               {{$t('选择')}}
                            </el-button>
                        </div>
                        <div v-else>
                            {{ row[column.prop] }}
                        </div>
                  </template>
                </vxe-column>
            </vxe-table>
            <div v-loading="loading" style="display: flex; align-items: center; justify-content: center; margin-top: 5px">
                <!-- 自定义的 total 文本 -->
                <span style="width: 100px"> {{ $t('总计') }}:{{ allcount }}</span>
                <!-- 自定义显示 "100/页" 形式 -->
                <el-select v-model="findform.pagecount" @change="handleSizeChange" style="width: 100px">
                    <el-option v-for="size in [10, 50, 100, 200, 500, 1000]" :key="size" :label="size" :value="size" />
                </el-select>
                <el-pagination v-model:current-page="findform.page" v-model:page-size="findform.pagecount" background :page-sizes="[10, 50, 100, 200, 500, 1000]" layout=" prev, pager, next" :total="allcount" @size-change="handleSizeChange" @current-change="handlePageChange"> </el-pagination>
                <span>{{ $t('跳至') }}</span>
                <el-input-number style="width: 100px" v-model="jumbPage" :controls="false" @keyup.enter="onjumbEnter"></el-input-number>
            </div>
        </div>
        <template #footer>
            <div>
                <el-button @click="cancel()">{{ $t('取消') }}</el-button>
                <el-button type="primary" @click="hadselect()"> {{ $t('确定') }} </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { httpSend } from '../../utils/api';
import { ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { Search } from '@element-plus/icons-vue';
import { TableUiSection } from '@/components/share/ui-set.interface.ts';
import { useshareStore } from '@/store'; /*pina管理*/
// 自定义字段配置
const componentId = 'rolemodelsetting';
const uiSectionList: TableUiSection[] = [
    {
        baseProps: [],
        tableProps: [
            //{ label: '选择', labelex: '', labeleng: '', prop: 'checked', visible: true, readonly: false, width: '80', type: 'checkbox', fixed: 'left', align: 'center' },
            { label: '角色ID', labelex: '', labeleng: '', prop: 'usrgroupid', visible: true, readonly: false, width: '100', type: 'string', fixed: null, align: 'left' },
            { label: '角色名称', labelex: '', labeleng: '', prop: 'name', visible: true, readonly: false, width: '100', type: 'string', fixed: null, align: 'center' },
            { label: '状态', labelex: '', labeleng: '', prop: 'state', visible: true, readonly: false, width: '100', type: 'string', fixed: null, align: 'center' },
            { label: '角色描述', labelex: '', labeleng: '', prop: 'des', visible: true, readonly: false, width: '100', type: 'string', fixed: null, align: 'center' },
            { label: '操作', labelex: '', labeleng: '', prop: 'action', visible: true, readonly: false, width: '170', type: 'action', fixed: null, align: 'center' },
        ],
    },
];
const { t } = useI18n(); //多语言
//是否显示弹窗组件
const dialogVisible = ref(false);
interface FormDatabaseProps {
    isreadonly?: boolean;
    id?: string;
    name?: string;
}
const formdatabase = withDefaults(defineProps<FormDatabaseProps>(), {
    isreadonly: false,
    id: '',
    name: '',
});
const Stores = useshareStore() as any;
const loading = ref(false); //页面加载状态
const allcount = ref(0); //总数据
const tablelist: any = ref([]); //表格数据
const jumbPage = ref(1); // 当前页
let selectindex = null;
const findform = reactive({
    keyvalue: null,
    page: 1,
    pagecount: 10,
});

//显示弹窗
const showform = () => {
    dialogVisible.value = true;
    if (allcount.value == 0) {
        gettablist();
    }
};
//获取角色
const gettablist = async () => {
    loading.value = true;
    const fd = new FormData();
    fd.append('param', JSON.stringify(findform));
    const res = await httpSend('getUsrGroup', fd, false);
    if (res && res.data) {
        tablelist.value = res.data;
        allcount.value = res.count;
    }
    loading.value = false;
};
//页签变化
const handlePageChange = (newPage) => {
    findform.page = newPage;
    gettablist();
};
//当前页数变化
const handleSizeChange = (val: number) => {
    findform.pagecount = val;
    gettablist();
};
//跳转第*页回车事件
const onjumbEnter = () => {
    findform.page = jumbPage.value;
    gettablist();
};
// 定义 emits 的事件
const emit = defineEmits<{
    (event: 'updatedata', dept: any): void;
    (event: 'update:name', value: string): void;
    (event: 'update:id', value: string): void;
}>();
//双击选则
const dbSetCurrent = (e) => {
    hadselect();
};
//单选
const SetCurrent = (e) => {
    selectindex = e.rowIndex;
};
//确认
const comfirm = (index, row) => {
    selectindex = index;
    hadselect();
};
//选择
const hadselect = () => {
    dialogVisible.value = false;
    emit('update:id', tablelist.value[selectindex].usrgroupid);
    emit('update:name', tablelist.value[selectindex].name);
    emit('updatedata', tablelist.value[selectindex]);
};
//取消选择
const cancel = () => {
    dialogVisible.value = false;
};
const handleChange = (type, e) => {
    if (type == 'id') {
        emit('update:id', e);
    } else if (type == 'name') {
        emit('update:name', e);
    }
};
const I = (label, labeleng) => {
    if (labeleng && localStorage.getItem('locale') == 'en') {
        return labeleng;
    }
    return t(label);
};
</script>
<style scoped></style>
